<template>
    <div class="page-staff-manage">
        <div class="main">
            <div class="order-wrap">
                <OrderCard
                    v-for="(orderId, index) in orderList"
                    @showType="showType"
                    :key="index"
                    label-color="blue"
                    :order="orderMap[orderId]"
                    :detail="orderMap[orderId].detail"
                    :order-key="orderKey"
                    :final="orderMap[orderId].final_payment"
                    :delivery="orderMap[orderId].delivery"
                    :is-prepay="orderMap[orderId].is_prepay"
                    :buyer-confirm="orderMap[orderId].buyer_confirm"
                    :order-id="orderMap[orderId].id"
                    :link-id="orderMap[orderId].link_id"
                    :has-btn="false"
                    :cover="orderMap[orderId].cover"
                    :title="orderMap[orderId].title"
                    :nickname="orderMap[orderId].name ? orderMap[orderId].name : orderMap[orderId].nickname"
                    :price="orderMap[orderId].price"
                    :original-price="orderMap[orderId].original_price"
                    :coupon-pay="orderMap[orderId].coupon_pay"
                    :createdAt="orderMap[orderId].created_at"
                    :referrer="orderMap[orderId].referrer_name ? orderMap[orderId].referrer_name : orderMap[orderId].referrer_nickname"
                    :referrer-level="orderMap[orderId].referrer_level"
                    :is-finish="orderMap[orderId].is_finish"
                    :order-status="orderMap[orderId].status"
                    :order-type="orderMap[orderId].type"
                    :mobile="orderMap[orderId].mobile"
                    :buyer-remark="orderMap[orderId].buyer_remark" />
            </div>
        </div>

        <ListFooter :loaded="orderWrap.loaded" :req="orderWrap.req" />
    </div>
</template>

<script lang="ts">
import {
    api,
} from '@/lib/api';
import { ROUTE_NAME } from '@/lib/constant';

import OrderCard from '@/features/manage/orderCard.vue';
import { EMPTY_LIST } from '@/lib/constant';
import {
    getOrderKey,
} from '@/lib/utils';
import store from '@/store';
import { Component, Vue } from 'vue-property-decorator';

@Component({
    name: 'OrderList',
    components: {
        OrderCard,
    },
})
export default class OrderList extends Vue {
    public selectedPeople: any = null;

    public get referrerId() {
        return this.$route.query.referrer_id;
    }
    public get referrerLevel() {
        return this.$route.query.referrer_level;
    }
    public get shopId() {
        return ((this.$route.query.shop_id || '') as string).split(',');
    }
    public get start() {
        return this.$route.query.start;
    }
    public get end() {
        return this.$route.query.end;
    }
    public get orderListMap() {
        return store.state.manage.orderListMap;
    }

    public get orderMap() {
        return store.state.manage.orderMap;
    }

    public get orderKey() {
        return this.referrerId ? getOrderKey({
            referrerId: this.referrerId,
            referrerLevel: this.referrerLevel,
            shopId: this.shopId,
            start: this.start,
            end: this.end,
        }) : getOrderKey({});
    }
    public get orderWrap() {
        return this.orderListMap[this.orderKey] || EMPTY_LIST;
    }
    public get orderList(): number[] {
        return this.orderWrap.list;
    }
// 新增在线管理-平台管理-看板订单列表进入详情
    public async showType(_data){
        const res = await store.dispatch('order/getManageOrderDetail', {
            orderId: _data.orderId,
        });
        if (res.statusCode !== 200 || res.data.status !== 0) {
            wx.showToast({
                title: '订单不存在',
                icon: 'none',
            });

        }else{
            if(res.data.data == null){
                wx.showToast({
                    title: '订单不存在',
                    icon: 'none',
                });
            }else{
                api.push({
                    name: ROUTE_NAME.ORDER_MANAGE_ORDER_DETAIL,
                    params: {
                        orderId: _data.orderId+ '',
                    }
                })
            }
        }
    }

    public async onReachBottom() {
        await this.getOrderList();
    }
    public async getOrderList(forceUpdate = false) {
        const params: any = {
            offset: this.orderList.length,
            count: 10,
            referrerId: this.referrerId,
            referrerLevel: this.referrerLevel,
            shopId: typeof this.shopId === 'string' ? [ this.shopId ] : this.shopId,
            start: this.start,
            end: this.end,
        };
        if (forceUpdate) {
            params.offset = 0;
            params.forceUpdate = true;
        }
        await store.dispatch('manage/getOrderList', params);
    }

    public async created() {
        this.getOrderList(true);
        
        window.addEventListener('reachbottom', this.onReachBottom);
    }
    public beforeDestroy() {
        window.removeEventListener('reachbottom', this.onReachBottom);
    }
}
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.page-staff-manage {
    min-height: 100%;
    background-color: #f8f8f8;

    .main {
        background-color: #f8f8f8;
        .search-box {
            .title {
                padding-top: 12px;
            }
        }
        .order-wrap {
            padding: 0 6px;
        }
    }
     .outer-picker {
        position: relative;
        padding: 12px;
        .people-picker-box {
            box-sizing: border-box;
            width: 100%;
            padding: 5px 10px;
            border: 1px solid #BBBBBB;
            border-radius: 20px;
            .picker {
                position: relative;
                box-sizing: border-box;
                width: 100%;
                padding: 0 30px;
                &::before {
                    position: absolute;
                    left: 10px;
                    top: 50%;
                    transform: translateY(-50%);
                    font-family: 'iconfont';
                    content: "\e610";
                    font-size: 16px;
                    color: @grey-color;
                    pointer-events: none;
                }
            }
        }
        .options-box {
            box-sizing: border-box;
            position: absolute;
            z-index: 2;
            top: 48px;
            left: 12px;
            width:  375 * 2 - 24px;
            background-color: @white-color;
            border: 1px solid #BBBBBB;
            border-radius: 5px;
            .inner {
                width: 100%;
                max-height: 250px;
                overflow-y: scroll;
                .item {
                    position: relative;
                    box-sizing: border-box;
                    width: 100%;
                    height: 30px;
                    line-height: 30px;
                    text-align: center;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
        }
    }
}

</style>
